import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {DatePipe} from '@angular/common';
import {LimitedFarm} from '../limited-farm';

@Component({
  selector: 'app-wind-power-panel',
  templateUrl: './wind-power-panel.component.html',
  styleUrls: ['./wind-power-panel.component.css']
})
export class WindPowerPanelComponent implements OnInit, OnChanges {
  /**
   * echarts实例对象
   *
   * @private
   * @type {*}@memberof RealtimePowerPanelComponent
   */
  private echartsIntance: any;
  public option: any;

  @Input()
  public currentFarm: LimitedFarm;

  /**
   * 跨度（天）
   *
   * @type {number}@memberof WindPowerPanelComponent
   */
  @Input()
  public interval: number = 2;
  title: string = '风';
  seriesData: any[] = [];
  xAxisData: Date[] = [];
  maxNum: any = 25;

  constructor(
    private datePipe: DatePipe
  ) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.currentFarm && changes.currentFarm.currentValue) {
      this.update();
    }
  }

  public update() {
    if (this.currentFarm.farmCategory == 'winfarm') {
      this.maxNum = 25;
      this.title = '风';
    } else if (this.currentFarm.farmCategory == 'photovoltaic') {
      this.maxNum = 'none';
      this.title = '辐射';
    }
    this.seriesData = [];
    let legendData: string[] = [];
    let names = Object.getOwnPropertyNames(this.currentFarm.histories);
    names.forEach(name => {
      let history = this.currentFarm.histories[name];
      legendData.push(history.title);
      this.seriesData.push({
        name: history.title,
        type: 'line',
        smooth: true,
        symbol: 'none',
        yAxisIndex: history.code.toLowerCase().indexOf('AVERAGEWINDSPEED'.toLowerCase()) > 0 ? 0 : 1,
        itemStyle: {
          normal: {
            color: history.color
          }
        },
        areaStyle: {
          normal: {},
          opacity: 0.5
        },
        lineStyle: {
          normal: {
            width: 0
          }
        },
        data: history.data
      });
    });
    this.option = {
      tooltip: {
        trigger: 'axis',
        formatter: (params, ticket, callback) => {
          let result = this.datePipe.transform(new Date(params[0].data[0]), 'yyyy-MM-dd HH:mm:ss') + '</br>';
          params.forEach((item) => {
            result += item.marker + item.seriesName + ':' + item.value[1] + '</br>';
          });
          return result;
        }
      },
      grid: {
        left: '5%',
        right: '8%',
        top: 50,
        bottom: 0,
        containLabel: true
      },
      legend: {
        data: legendData,
        right: '10%',
        //backgroundColor:"#8ee183",
        textStyle: {
          color: '#8ee183'
        },
        padding: [10, 0]
      },
      calculable: true,
      xAxis: [
        {
          type: 'time',
          boundaryGap: false,
          axisLabel: {
            // 该属性的用来定义坐标轴的标签;
            formatter: (value, index) => {
              return index * 2;
            },
            textStyle: {
              color: '#8ee183'
            }
          },
          splitLine: {
            lineStyle: {
              opacity: 0.2
            }
          },
          interval: 60000 * 60 * 2,
          min: new Date(new Date().toLocaleDateString()),
          max: new Date(new Date(new Date().toLocaleDateString()).getTime() + 172800000)
        },
      ],
      yAxis: [
        {
          type: 'value',
          max: this.maxNum,
          min: 0,
          position: 'right',
          // min: 0,
          // max: 25,
          axisLine: {
            textStyle: {
              color: '#8ee183'
            }
          },
          nameTextStyle: {
            color: '#8ee183',
          },
          splitLine: {
            lineStyle: {
              opacity: 0
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          }
        },
        {
          type: 'value',
          position: 'left',
          // min: -1000,
          // max: 1000,
          nameTextStyle: {
            color: '#8ee183',
          },
          splitLine: {
            lineStyle: {
              opacity: 0.2
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
        },
      ],
      series: this.seriesData
    }
    this.updateEchart();

  }

  ngOnInit() {
    ///this.update();
    //console.log(this.option)
  }

  /**
   * 初始化echarts实例
   *
   *
   * @memberof Echart2Component
   */
  onChartInit(ec: any) {
    this.echartsIntance = ec;
    this.updateEchart();
  }

  public updateEchart() {
    if (this.echartsIntance != null) {
      this.echartsIntance.setOption(this.option);
    }
  }
}
